import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_demo/main.dart';
import 'package:flutter_public/config/public_language.dart';
import 'package:flutter_public/flutter_public.dart';

import '../../generated/l10n.dart';

/// FileName flutter_public_page
///
/// @Author lax
/// @Date 2024/6/4
///
/// @Description

class FlutterPublicPage extends StatefulWidget {
  static const testImageUrl =
      'https://aksvpotest.ab-inbev.cn:460/api/file/FileManager/DownloadBlob?url=6ECAC81813CAABFAA65BDB302493F11A1D8AFC4E53A5F7ADC4C8EFB365B9E4C0875F6DC912BFE9927295C4BF27CAF2D1CF709D24E5C87F5D35C1EEACC452838DFADAE9E99C1645EAE595BAAE765AE3D75D162E10FB5939C84DEA6C16D00608B597E7F562B52006FD8C1BEC001ABEF6735E59B7E80B394911248232654EAC3B38919570C2C11A43D7486D109705C2266A5A17047505A98D72.png';

  // static const testImageUrl = ''https://upload.jianshu.io/users/upload_avatars/24645157/484d7659-daeb-455c-9e08-28d0a057c9be.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/100/h/100'';

  const FlutterPublicPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _FlutterPublicPageState();
  }
}

class _FlutterPublicPageState extends State<FlutterPublicPage> {
  String? publicTextFieldText;
  String? radiusTextFieldText;
  String? borderTextFieldText;

  bool? publicRadioValue;
  bool publicCheckBoxValue = false;

  int publicSegmentValue = 0;
  int flexibleSegmentValue = 0;

  KeyValueModel? radioItemValue;
  bool checkBoxItemValue = false;
  bool switchItemValue = false;
  int segmentItemValue = 0;
  String? textSelectItemKey;
  String? textSelectItemValue;
  String? textSelectItemMultipleKey;
  String? textSelectItemMultipleValue;
  String? textSelectItemDateValue;
  String? textFieldItemValue;
  String? textViewItemValue;

  @override
  Widget build(BuildContext context) {
    return HideKeyboardScaffold(
      appBar: PublicAppBar(
        title: 'flutter_public',
        decoration: AssetsImage.decoration(
          name: 'activity_bg',
          fit: BoxFit.fill,
        ),
      ),
      body: body(),
    );
  }

  Widget body() {
    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 12),
      physics: const AlwaysScrollableScrollPhysics(),
      child: SeparatedColumn(
        // separator: const SizedBox(height: 12),
        children: [
          SectionHeader(title: 'TitleStyle'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              padding: const EdgeInsets.all(12),
              separator: const PaddingDivider(padding: EdgeInsets.all(12)),
              children: [
                Text(
                  'NormalTextStyle',
                  style: NormalTextStyle(color: Colors.orange),
                ),
                Text(
                  'MediumTextStyle',
                  style: MediumTextStyle(color: Colors.orange),
                ),
                Text(
                  'SemiBoldTextStyle',
                  style: SemiBoldTextStyle(color: Colors.orange),
                ),
                Text(
                  'BoldTextStyle',
                  style: BoldTextStyle(color: Colors.orange),
                ),
              ],
            ),
          ),
          SectionHeader(title: 'Text'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              padding: const EdgeInsets.all(12),
              separator: const PaddingDivider(
                  padding: EdgeInsets.symmetric(vertical: 12)),
              children: [
                RequireText(text: 'RequireText'),
                LongPressCopyText(text: 'LongPressCopyText'),
              ],
            ),
          ),
          SectionHeader(title: 'Button'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              separator: const PaddingDivider(),
              children: [
                VerticalItem(
                  title: 'PublicButton',
                  valueWidget: PublicButton(
                    text: 'PublicButton',
                    onPressed: () {
                      Toast.show('onPressed');
                    },
                  ),
                ),
                VerticalItem(
                  title: 'BorderButton',
                  valueWidget: BorderButton(
                    text: 'BorderButton',
                    onPressed: () {
                      Toast.show('onPressed');
                    },
                  ),
                ),
              ],
            ),
          ),
          SectionHeader(title: 'Tag'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              padding: const EdgeInsets.all(12),
              separator: const PaddingDivider(
                  padding: EdgeInsets.symmetric(vertical: 12)),
              children: [
                PublicTag(text: 'PublicTag'),
                BorderTag(text: 'BorderTag'),
              ],
            ),
          ),
          SectionHeader(title: 'Subscript'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              padding: const EdgeInsets.all(12),
              separator: const PaddingDivider(
                  padding: EdgeInsets.symmetric(vertical: 12)),
              children: [
                Row(
                  children: [
                    const Text('TextSubscript'),
                    Stack(
                      alignment: Alignment.topRight,
                      children: [
                        const Padding(
                          padding:
                              EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                          child: Icon(Icons.home),
                        ),
                        TextSubscript(text: 'text'),
                      ],
                    )
                  ],
                ),
                Row(
                  children: [
                    const Text('NumberSubscript'),
                    Stack(
                      alignment: Alignment.topRight,
                      children: [
                        const Padding(
                          padding:
                              EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                          child: Icon(Icons.home),
                        ),
                        NumberSubscript(number: 666),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),
          SectionHeader(title: 'TextField'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              separator: const PaddingDivider(),
              children: [
                VerticalItem(
                  title: 'PublicTextField',
                  value: publicTextFieldText,
                  valueWidget: PublicTextField(
                    onChanged: (text) {
                      publicTextFieldText = text;
                    },
                  ),
                ),
                VerticalItem(
                  title: 'RadiusTextField',
                  value: radiusTextFieldText,
                  valueWidget: RadiusTextField(
                    onChanged: (text) {
                      radiusTextFieldText = text;
                    },
                  ),
                ),
                VerticalItem(
                  title: 'BorderTextField',
                  value: borderTextFieldText,
                  valueWidget: BorderTextField(
                    onChanged: (text) {
                      borderTextFieldText = text;
                    },
                  ),
                ),
              ],
            ),
          ),
          SectionHeader(title: 'Radio'),
          RadiusShadowContainer(
            width: double.infinity,
            padding: const EdgeInsets.all(16),
            child: InkWell(
              onTap: () {
                setState(() {
                  publicRadioValue = true;
                });
              },
              child: PublicRadio(
                title: 'PublicRadio',
                value: publicRadioValue,
              ),
            ),
          ),
          SectionHeader(title: 'CheckBox'),
          RadiusShadowContainer(
            width: double.infinity,
            padding: const EdgeInsets.all(16),
            child: InkWell(
              onTap: () {
                setState(() {
                  publicCheckBoxValue = !publicCheckBoxValue;
                });
              },
              child: PublicCheckBox(
                title: 'PublicCheckBox',
                value: publicCheckBoxValue,
              ),
            ),
          ),
          SectionHeader(title: 'Segment'),
          RadiusShadowContainer(
            width: double.infinity,
            padding: const EdgeInsets.all(16),
            child: SeparatedColumn(
              separator: const SizedBox(height: 8),
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                PublicSegment(
                  value: publicSegmentValue,
                  dataSource: const ['PublicSegment', 'PublicSegment'],
                  onChanged: (value) {
                    setState(() {
                      publicSegmentValue = value;
                    });
                  },
                ),
                FlexibleSegment(
                  value: flexibleSegmentValue,
                  dataSource: const ['FlexibleSegment', 'FlexibleSegment'],
                  onChanged: (value) {
                    setState(() {
                      flexibleSegmentValue = value;
                    });
                  },
                ),
                // 多语言切换
                PublicSegment(
                  value: PublicLanguage.language.index,
                  unselectedTextStyle: NormalTextStyle(),
                  dataSource: const [' 中文 ', 'English'],
                  itemWidth: 88,
                  onChanged: (int index) {
                    final state = mainKey.currentState;
                    if (state is MyAppState) {
                      setState(() {
                        state.updateLanguage(Language.values[index]);
                        Timer(const Duration(milliseconds: 100), () {
                          Toast.show(S.current.operationSuccessful);
                        });
                      });
                    }
                  },
                )
              ],
            ),
          ),
          SectionHeader(title: 'Image'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              separator: const PaddingDivider(),
              children: [
                HorizontalItem(
                  title: 'AssetsImage',
                  rightWidget: AssetsImage(
                    size: 40,
                    url: FlutterPublicPage.testImageUrl,
                  ),
                ),
                HorizontalItem(
                  title: 'TapAssetsImage',
                  rightWidget: const TapAssetsImage(
                    size: 40,
                    url: FlutterPublicPage.testImageUrl,
                  ),
                ),
                HorizontalItem(
                  title: 'RadiusImage',
                  rightWidget: RadiusImage(
                    size: 40,
                    radius: 5,
                    url: FlutterPublicPage.testImageUrl,
                  ),
                ),
                HorizontalItem(
                  title: 'CircleImage',
                  rightWidget: CircleImage(
                    size: 40,
                    url: FlutterPublicPage.testImageUrl,
                  ),
                ),
              ],
            ),
          ),
          SectionHeader(title: 'Container'),
          SeparatedColumn(
            separator: const SizedBox(height: 12),
            children: [
              const ShadowContainer(
                width: double.infinity,
                alignment: Alignment.center,
                height: 44,
                child: Text('ShadowContainer'),
              ),
              BorderContainer(
                height: 44,
                child: const Text('BorderContainer'),
              ),
              RadiusShadowContainer(
                width: double.infinity,
                alignment: Alignment.center,
                height: 44,
                child: const Text('RadiusShadowContainer'),
              ),
              Center(
                child: CircleContainer(
                  size: 110,
                  alignment: Alignment.center,
                  child: const Text('CircleContainer'),
                ),
              ),
            ],
          ),
          SectionHeader(title: 'SeparatedRow'),
          RadiusShadowContainer(
            child: const SeparatedRow(
              padding: EdgeInsets.all(16),
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              separator: Text('Separated'),
              children: [
                Text('Item1'),
                Text('Item2'),
              ],
            ),
          ),
          SectionHeader(title: 'SeparatedColumn'),
          RadiusShadowContainer(
            width: double.infinity,
            child: const SeparatedColumn(
              padding: EdgeInsets.all(16),
              separator: Text('Separated'),
              children: [
                Text('Item1'),
                Text('Item2'),
              ],
            ),
          ),
          SectionHeader(title: 'Dialog'),
          RadiusShadowContainer(
            child: TextTapItem(
              title: 'PublicAlertDialog',
              onTap: () {
                PublicAlertDialog.show(
                  context: context,
                  title: 'Title',
                  message: 'this is message',
                  onConfirm: () {
                    Toast.show('onConfirm');
                  },
                );
              },
            ),
          ),
          SectionHeader(title: 'Sheet'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              separator: const PaddingDivider(),
              children: [
                TextTapItem(
                  title: 'ActionSheet',
                  onTap: () {
                    ActionSheet.show(
                      context: context,
                      title: 'ActionSheet',
                      dataSource: [
                        KeyValueModel(key: '1', value: 'A'),
                        KeyValueModel(key: '2', value: 'B'),
                        KeyValueModel(key: '3', value: 'C'),
                      ],
                      onSelected: (value) {
                        Toast.show(value.value);
                      },
                    );
                  },
                ),
                TextTapItem(
                  title: 'UploadFileActionSheet',
                  onTap: () {
                    UploadFileActionSheet.show(
                      context: context,
                      onSelected: (images) {
                        Toast.show(images.join('\n'));
                      },
                    );
                  },
                ),
                TextTapItem(
                  title: 'ModalBottomSheet.showCloseSheet',
                  onTap: () {
                    ModalBottomSheet.showCloseSheet(
                      context: context,
                      title: 'Title',
                      child: const Center(
                        child: Text('data'),
                      ),
                    );
                  },
                ),
                TextTapItem(
                  title: 'ModalBottomSheet.showConfirmSheet',
                  onTap: () {
                    ModalBottomSheet.showConfirmSheet(
                      context: context,
                      title: 'Title',
                      onConfirm: () {
                        Toast.show('onConfirm');
                      },
                      child: const Center(
                        child: Text('data'),
                      ),
                    );
                  },
                ),
                TextTapItem(
                  title: 'ModalBottomSheet.showSingleSheet',
                  onTap: () {
                    ModalBottomSheet.showSingleSheet(
                      context: context,
                      title: 'Title',
                      dataSource: [
                        KeyValueModel(key: '1', value: 'A'),
                        KeyValueModel(key: '2', value: 'B'),
                        KeyValueModel(key: '3', value: 'C'),
                      ],
                      onConfirm: (value) {
                        Toast.show(value?.value);
                      },
                    );
                  },
                ),
                TextTapItem(
                  title: 'ModalBottomSheet.showMultipleSheet',
                  onTap: () {
                    ModalBottomSheet.showMultipleSheet(
                      context: context,
                      title: 'Title',
                      dataSource: [
                        KeyValueModel(key: '1', value: 'A'),
                        KeyValueModel(key: '2', value: 'B'),
                        KeyValueModel(key: '3', value: 'C'),
                      ],
                      onConfirm: (value) {
                        Toast.show(value.selectedValue);
                      },
                    );
                  },
                ),
              ],
            ),
          ),
          SectionHeader(title: 'DatePicker'),
          RadiusShadowContainer(
              child: SeparatedColumn(
            separator: const PaddingDivider(),
            children: [
              TextTapItem(
                title: 'DatePicker',
                onTap: () {
                  DatePicker.show(
                    context: context,
                    title: 'Title',
                    onConfirm: (date) {
                      Toast.show(date);
                    },
                  );
                },
              ),
              TextTapItem(
                title: 'DatePicker.systemDatePicker',
                onTap: () {
                  DatePicker.systemDatePicker(
                    context: context,
                    onConfirm: (value) {
                      Toast.show(value);
                    },
                  );
                },
              ),
            ],
          )),
          SectionHeader(title: 'PageIndicator'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              separator: const PaddingDivider(),
              children: [
                TextTapItem(
                  title: 'PageIndicator.empty',
                  onTap: () {
                    ModalBottomSheet.showCloseSheet(
                      context: context,
                      child: PageIndicator(
                        isEmpty: true,
                        emptyImage: Icon(
                          Icons.image_outlined,
                          size: 80,
                          color: PublicColor.hintText,
                        ),
                      ),
                    );
                  },
                ),
                TextTapItem(
                  title: 'PageIndicator.loading',
                  onTap: () {
                    ModalBottomSheet.showCloseSheet(
                      context: context,
                      child: const PageIndicator(
                        pageStatus: PageStatus.loading,
                      ),
                    );
                  },
                ),
                TextTapItem(
                  title: 'PageIndicator.error',
                  onTap: () {
                    ModalBottomSheet.showCloseSheet(
                      context: context,
                      child: PageIndicator(
                        pageStatus: PageStatus.error,
                        errorImage: Icon(
                          Icons.error_outline,
                          size: 80,
                          color: PublicColor.hintText,
                        ),
                        onReload: () {
                          Toast.show('onReload');
                        },
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
          SectionHeader(title: 'Item'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              separator: const PaddingDivider(),
              children: [
                HorizontalItem(
                  title: 'HorizontalItem',
                  value: 'value',
                  leftWidget: const Text('leftWidget'),
                  rightWidget: const Text('rightWidget'),
                ),
                VerticalItem(
                  title: 'VerticalItem',
                  value: 'value',
                  topWidget: const Text('topWidget'),
                  bottomWidget: const Text('bottomWidget'),
                ),
                RadioItem(
                  title: 'RadioItem',
                  value: radioItemValue?.key,
                  titleWidth: 100,
                  expanded: true,
                  // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  dataSource: [
                    KeyValueModel(key: '1', value: 'A'),
                    KeyValueModel(key: '2', value: 'B'),
                    KeyValueModel(key: '3', value: 'C'),
                  ],
                  onChanged: (value) {
                    setState(() {
                      radioItemValue = value;
                    });
                  },
                ),
                CheckBoxItem(
                  title: 'CheckBoxItem',
                  value: checkBoxItemValue,
                  onTap: () {
                    setState(() {
                      checkBoxItemValue = !checkBoxItemValue;
                    });
                  },
                ),
                SwitchItem(
                  title: 'SwitchItem',
                  value: switchItemValue,
                  onChanged: (value) {
                    setState(() {
                      switchItemValue = !switchItemValue;
                    });
                  },
                ),
                SegmentItem(
                  title: 'SegmentItem',
                  titleWidth: 100,
                  value: segmentItemValue,
                  dataSource: const ['Segment', 'Segment'],
                  onChanged: (value) {
                    setState(() {
                      segmentItemValue = value;
                    });
                  },
                ),
                TextTapItem(
                  title: 'TextTapItem',
                  onTap: () {
                    Toast.show('onTap');
                  },
                ),
                TextSelectItem(
                  title: 'TextSelectItem',
                  value: textSelectItemValue,
                  onTap: () {
                    ModalBottomSheet.showActionSheet(
                      context: context,
                      selectedId: textSelectItemKey,
                      dataSource: [
                        KeyValueModel(key: '1', value: 'A'),
                        KeyValueModel(key: '2', value: 'B'),
                        KeyValueModel(key: '3', value: 'C'),
                        KeyValueModel(key: '4', value: 'D'),
                        KeyValueModel(key: '5', value: 'E'),
                        KeyValueModel(key: '6', value: 'AA'),
                        KeyValueModel(key: '7', value: 'BB'),
                        KeyValueModel(key: '8', value: 'CC'),
                        KeyValueModel(key: '9', value: 'DD'),
                        KeyValueModel(key: '10', value: 'EE'),
                        KeyValueModel(key: '11', value: 'EF'),
                      ],
                      onConfirm: (value) {
                        setState(() {
                          textSelectItemKey = value?.key;
                          textSelectItemValue = value?.value;
                        });
                      },
                    );
                  },
                ),
                TextSelectItem(
                  title: 'TextSelectItem',
                  value: textSelectItemMultipleValue,
                  onTap: () {
                    ModalBottomSheet.showMultipleSheet(
                      context: context,
                      selectedId: textSelectItemMultipleKey,
                      dataSource: [
                        KeyValueModel(key: '1', value: 'A'),
                        KeyValueModel(key: '2', value: 'B'),
                        KeyValueModel(key: '3', value: 'C'),
                        KeyValueModel(key: '4', value: 'D'),
                        KeyValueModel(key: '5', value: 'E'),
                        KeyValueModel(key: '6', value: 'AA'),
                        KeyValueModel(key: '7', value: 'BB'),
                        KeyValueModel(key: '8', value: 'CC'),
                        KeyValueModel(key: '9', value: 'DD'),
                        KeyValueModel(key: '10', value: 'EE'),
                        KeyValueModel(key: '11', value: 'EF'),
                      ],
                      onConfirm: (value) {
                        setState(() {
                          textSelectItemMultipleKey = value.selectedKey;
                          textSelectItemMultipleValue = value.selectedValue;
                        });
                      },
                    );
                  },
                ),
                TextSelectItem(
                  title: 'TextSelectItem',
                  value: textSelectItemDateValue,
                  onTap: () {
                    DatePicker.show(
                        context: context,
                        value: textSelectItemDateValue,
                        onConfirm: (date) {
                          setState(() {
                            textSelectItemDateValue = date;
                          });
                        });
                  },
                ),
                TextFieldItem(
                  title: 'TextFieldItem',
                  value: textFieldItemValue,
                  onChanged: (text) {
                    setState(() {
                      textFieldItemValue = text;
                    });
                  },
                ),
                TextViewItem(
                  title: 'TextViewItem',
                  value: textViewItemValue,
                  onChanged: (text) {
                    setState(() {
                      textViewItemValue = text;
                    });
                  },
                ),
              ],
            ),
          ),
          SectionHeader(title: 'WebView'),
          RadiusShadowContainer(
            child: TextTapItem(
              title: 'WebViewPage',
              onTap: () {
                Navigator.push(context, MaterialPageRoute(builder: (_) {
                  return WebViewPage(
                    showAppBar: true,
                    autoTitle: true,
                    urlString: 'https://www.baidu.com',
                  );
                }));
              },
            ),
          ),
          SectionHeader(title: 'ShowImage'),
          RadiusShadowContainer(
            child: TextTapItem(
              title: 'ShowImagePage',
              onTap: () {
                Navigator.push(context, MaterialPageRoute(builder: (_) {
                  return const ShowImagePage(
                    urlString: FlutterPublicPage.testImageUrl,
                  );
                }));
              },
            ),
          ),
          SectionHeader(title: 'Scaffold'),
          RadiusShadowContainer(
            child: TextTapItem(
              title: 'BackgroundImageScaffold',
              onTap: () {
                Navigator.push(context, MaterialPageRoute(builder: (_) {
                  return BackgroundImageScaffold(
                    imageUrl: FlutterPublicPage.testImageUrl,
                    appBar: PublicAppBar(
                      title: 'BackgroundImageScaffold',
                    ),
                    body: const Center(
                      child:
                          Text('body', style: TextStyle(color: Colors.white)),
                    ),
                  );
                }));
              },
            ),
          ),
          SectionHeader(title: 'Animation'),
          RadiusShadowContainer(
            child: SeparatedColumn(
              separator: PaddingDivider(),
              children: [
                TextTapItem(
                  title: 'OpacityAnimation',
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(builder: (_) {
                      return Scaffold(
                        appBar: PublicAppBar(
                          title: 'OpacityAnimation',
                        ),
                        body: Center(
                          child: OpacityAnimation(
                            child: helloWorld(),
                          ),
                        ),
                      );
                    }));
                  },
                ),
                TextTapItem(
                  title: 'RotateAnimation',
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(builder: (_) {
                      return Scaffold(
                        appBar: PublicAppBar(
                          title: 'RotateAnimation',
                        ),
                        body: Center(
                          child: RotateAnimation(
                            beginOpacity: 0,
                            child: helloWorld(),
                          ),
                        ),
                      );
                    }));
                  },
                ),
                TextTapItem(
                  title: 'ScaleAnimation',
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(builder: (_) {
                      return Scaffold(
                        appBar: PublicAppBar(
                          title: 'ScaleAnimation',
                        ),
                        body: Center(
                          child: ScaleAnimation(
                            beginOpacity: 0,
                            child: helloWorld(),
                          ),
                        ),
                      );
                    }));
                  },
                ),
                TextTapItem(
                  title: 'TranslateAnimation',
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(builder: (_) {
                      return Scaffold(
                        appBar: PublicAppBar(
                          title: 'TranslateAnimation',
                        ),
                        body: Center(
                          child: TranslateAnimation(
                            beginOpacity: 0,
                            child: helloWorld(),
                          ),
                        ),
                      );
                    }));
                  },
                ),
                TextTapItem(
                  title: 'TransformAnimation',
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(builder: (_) {
                      return Scaffold(
                        appBar: PublicAppBar(
                          title: 'TransformAnimation',
                        ),
                        body: Center(
                          child: TransformAnimation(
                            beginOpacity: 0,
                            endTransform: Matrix4.rotationZ(-0.5)..scale(1.2),
                            child: helloWorld(),
                          ),
                        ),
                      );
                    }));
                  },
                ),
              ],
            ),
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }

  Widget helloWorld() {
    return const Text('Hello World.',
        style: TextStyle(fontSize: 20, color: Colors.red));
  }
}
